<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue+elementUI登录及列表json数据传输测试前端</title>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <h1 style="text-align: center;">json列表分页</h1>
        <el-card style="padding:0 50px;max-width:320px;margin:0 auto">
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="username" label="名字" width="180">
                </el-table-column>
                <el-table-column prop="balance" label="分数">
                </el-table-column>
            </el-table>
            <el-pagination :current-page="curPage" layout="prev, pager, next" @current-change="getTableData" :page-count="pageCount">
            </el-pagination>
        </el-card>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                tableData: [],
                total: 0,
                curPage: 1,
                pageCount: 0,
                loading:false
            },
            mounted () {
                this.getTableData(1)
            },
            methods: {
                getTableData(e){
                    this.loading = true
                    let xhr = new XMLHttpRequest
                    xhr.onload = () => {
                        this.loading = false
                        let data = JSON.parse(xhr.responseText)
                        this.tableData = data.data
                        this.pageCount = data.total_page
                    }
                    curPage = e
                    xhr.open("GET", `http://127.0.0.1:8080/chapter14/getUserList?page=${e}`)
                    xhr.send()
                }
            },
        })
    </script>
</body>
</html>